<script setup>
import { reactive } from 'vue'
import useViewEvent from '@/core/hooks/useViewEvent'
import columnApi from '@/api/content/ColumnApi'
import { errorImage } from '@/core/config/constant'
import { NormalStateColors } from '@/core/config/ColorMap'

const state = reactive({ visible: false, errorImg:  errorImage })
// 表单数据
const formState = reactive({})
// 表单结构
const original = {
  id: '',
  parentId: 0, // 父ID parentId
  name: '',
  channelId:0,
  channelName: '',
  type: '',
  link: '',
  keywords: '',
  idx: 0,
  thumb: '',
  images: [],
  notes: ''
}
// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: columnApi.getFormModelById, formState: formState, original: original })
// 重写初始化
const initializationData = primaryKey=>{
  InitializeData(primaryKey).then(()=>{
    // console.info('重写初始化')
    formState.images = [{
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, {
      uid: '-2',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, {
      uid: '-3',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, {
      uid: '-4',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, {
      uid: '-xxx',
      percent: 50,
      name: 'image.png',
      status: 'uploading',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, {
      uid: '-5',
      name: 'image.png',
      status: 'error',
    }]
  })
}
// 向父组件暴露方法和属性
defineExpose({ InitializeData: initializationData })

</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看栏目`"
    placement="right"
    :width="'50%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card
      hoverable
    >
      <a-descriptions :column="1" bordered>
        <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
        <a-descriptions-item label="频道">{{ formState.channelName }}</a-descriptions-item>
        <a-descriptions-item label="关键词">{{ formState.keywords }}</a-descriptions-item>
        <a-descriptions-item label="类型">{{ formState.type }}</a-descriptions-item>
        <a-descriptions-item label="链接">{{ formState.link }}</a-descriptions-item>
        <a-descriptions-item label="缩图">
          <a-image :width="160" :src="formState.thumb" :fallback="state.errorImg" />
        </a-descriptions-item>
        <a-descriptions-item label="轮播图">
          <a-image v-for="(img, idx) in formState.images" :key="idx" :width="150" :src="img" :fallback="state.errorImg" />
        </a-descriptions-item>
        <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="NormalStateColors[formState.state?.value]">{{ formState.state?.label }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间/人">{{ formState.createOn }}/ {{ formState.createBy }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-drawer>
</template>